<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        .iconfont {
            position: relative;
            font-size: 45px;
            vertical-align: bottom;
        }

        .child {
            position: absolute;
            top: -20px;
            right: -20px;
            font-size: 24px;
            padding: 4px;
            color: #fff;
            border-radius: 50%;
            background-color: red;
        }
    </style>
</head>

<body>
    <!-- 
        computed计算属性  vs methods 方法
        computed计算属性：
            作用：封装了一段对于数据的处理，求得一个结果
            语法：
                ①写在computed配置项中，和data并列
                ②作为属性，直接使用->this.计算属性 {{计算属性}}
            缓存特性（提升性能）：
                计算属性会对计算出来的结果缓存，再次使用直接读取缓存，依赖项变化了，会自动重新计算->并再次缓存
        methods方法：
            作用：给实例提供一个方法，调用以处理业务逻辑
            语法：
                ①写在methods配置项中
                ②作为方法，需要调用->this方法名()  {{方法名()}}  @事件名="方法名"
    -->
    <div id="app">
        <h1>小黑礼物盒清单
            <span class="iconfont icon-gouwuche">
                <span class="child">{{total}}</span>
            </span>
        </h1>
        <h1>小黑礼物盒清单
            <span class="iconfont icon-gouwuche">
                <span class="child">{{totalfn()}}</span>
            </span>
        </h1>
        <h1>小黑礼物盒清单
            <span class="iconfont icon-gouwuche">
                <span class="child">{{totalfn()}}</span>
            </span>
        </h1>
        <h1>小黑礼物盒清单
            <span class="iconfont icon-gouwuche">
                <span class="child">{{totalfn()}}</span>
            </span>
        </h1>
        <table border="1">
            <tr>
                <th>名字</th>
                <th>数量</th>
            </tr>
            <tr v-for="(item,index) in list" :key="item.id">
                <td>{{item.name}}</td>
                <td>{{item.num}}个</td>
            </tr>
        </table>
        <p>礼物总数：<span>{{total}}</span>个</p>
    </div>

    <script src="./script/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                list: [
                    { id: 1, name: '篮球', num: 1 },
                    { id: 2, name: '足球', num: 5 },
                    { id: 3, name: '羽毛球', num: 7 }
                ]
            },
            methods: {
                totalfn() {
                    console.log('methods方法执行了');

                    // 计算属性内部，可以直接通过this访问到app实例
                    // 需求：对 this.list 数组里面的 num 进行求和 -> reduce
                    // 注意：reduce可以不给初始值 但是这里得给 因为item是对象
                    let result = this.list.reduce((acc, item) => acc + item.num, 0);
                    return result
                }
            },
            computed: {
                total() {
                    console.log('计算属性执行了');

                    // 计算属性内部，可以直接通过this访问到app实例
                    // 需求：对 this.list 数组里面的 num 进行求和 -> reduce
                    // 注意：reduce可以不给初始值 但是这里得给 因为item是对象
                    let result = this.list.reduce((acc, item) => acc + item.num, 0);
                    return result
                }
            }
        })
    </script>
</body>

</html>